<!-- 商品详情页面组件 -->
<template>
    <div id="details">
      <!-- 头部 -->
      <div class="page-header">
        <div class="title">
          <p>商品详情-{{ dataList.productName }}</p>
          <div class="list">
            <ul>
              <li>
                <router-link to>概述</router-link>
              </li>
              <li>
                <el-link href="#sunpxit">用户评价</el-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 头部END -->
  
      <!-- 主要内容 -->
      <div class="main">
        <!-- 左侧商品轮播图 -->
        <div class="block">
          <el-carousel height="560px" v-if="dataList.pictureList.length > 1">
            <el-carousel-item v-for="item in dataList.pictureList" :key="item">
              <!-- <img style="height:560px;" :src="$target + item" :alt="item" /> -->
			  <img style="height:560px;" src="/src/assets/images/flower.jpg" />
            </el-carousel-item>
          </el-carousel>
          <div v-if="dataList.pictureList.length == 1">
<!--            <img
              style="height:560px; width: 560px"
              :src="$target + dataList.pictureList[0]"
              :alt="dataList.pictureList[0]"
            -->
			 <img style="height:560px;" src="/src/assets/images/flower.jpg" />
          </div>
        </div>
        <!-- 左侧商品轮播图END -->
  
        <!-- 右侧内容区 -->
        <div class="content">
          <h1 class="name">{{ dataList.productName}}</h1>
          <p class="intro">{{ dataList.productOrigin}}</p>
          <div
            style="display:flex;justify-content:space-between;align-items: center;"
          >
<!--            <span class="store">{{ dataList.originalPrice }}</span> -->
     <!--     <div style="fontWeight:bold;">
              <span class="store">限时秒杀：</span>
<!--              <span class="time">{{hour}}</span> : 
              <span class="time">{{min}}</span> : 
              <span class="time">{{sec}}</span> 
            </div> -->
          </div>
          <div class="price">
            <span style="font-weight: bold;">特惠鲜品价:{{ dataList.productNowPrice}}元</span>
            <span
              v-show="dataList.productNowPrice!= dataList.originalPrice"
              class="del">原价{{ dataList.originalPrice}}元</span
            >
          </div>
          <div class="pro-list">
            <span class="pro-name">{{ dataList.productName }}</span>
            <span class="pro-price">
              <span>{{ dataList.productNowPrice}}元</span>
              <span
                v-show="dataList.productNowPrice!= dataList.originalPrice"
                class="pro-del"
                >{{ dataList.originalPrice}}元</span
              >
            </span>
            <p class="price-sum">
              {{ seckill ? "秒杀价" : "总计" }} :
              {{ dataList.productNowPrice}}元
            </p>
          </div>
          <!-- 内容区底部按钮 -->
          <div class="button">
  <!--          <el-button
              class="shop-cart"
              :disabled="dis"
              v-if="seckill"
              @click="onSeckill"
              >{{seckillText}}</el-button
            > -->
            <el-button
              class="shop-cart"
              :disabled="dis"
              @click="addShoppingCart">加入购物车</el-button>
            <el-button class="like" @click="addCollect">喜欢</el-button>
          </div>
          <!-- 内容区底部按钮END -->
          <div class="pro-policy">
            <ul>
              <li v-for="item in dataList.typeList" :key="item">
                <i class="el-icon-circle-check"></i> {{ item.TypeName }}
              </li>
            </ul>
          </div>
        </div>
        <!-- 右侧内容区END -->
      </div>
      <div class="sun_pl">
        <p class="sun_p_lj">商品溯源信息</p>
  <!--      <p>证书编号：2021011606369670</p>
        <p>产品名称：Redmi 8A</p>
        <p>型号: 真我GT Neo 5G</p>
        <p>机身颜色: 最终幻想 骇客黑</p>
        <p>极客银运行内存RAM: 6GB 8GB 12GB
        <p>存储容量: 8+128GB 12+256GB 6+128GB</p>
        <p>网络模式: 双卡双待CPU型号: 天玑1200</p>-->
        <p>{{ dataList.productOrigin}}</p>
        <p class="sun_p_lj">评论</p>
  
  
<!--        <div id="sunpxit">
          <CommentSay type="二手" :discussList="arr"></CommentSay>
        </div> -->
      </div>
      <!-- 主要内容END -->
    </div>
  </template>
  <script setup lang="ts">
	  import { onMounted, ref } from "vue";
	  import { useAuthStore } from "@/stores";
	  import {getGoodsDetail} from "@/api/goods"
	   import {addCart} from "@/api/shoppingcart"
	  import { ElMessage } from "element-plus";
	  import {useCartStore} from '@/stores/cart'//全局存储购物车
  import { useRoute,useRouter } from 'vue-router'
	  
	  import {findById} from "@/api/user"
	  const username = localStorage.getItem('userName')
	  const cartStore  =useCartStore();
	  
	  const mainPic = ref("");
	  const route = useRoute();
	  const router = useRouter(); 
	  const userStore = useAuthStore();
	  const dataList=ref([])//取到的结果
	  //query
	  let  productId=route.query. productId;
	//·································购物车信息对象······························
	  let cartInfo = {
	    cartImgTitle: "", // 标题图地址
	    cartProductId: 0, // 农产品编号
	    cartProductName: "", // 农产品名称
	    cartProductPrice: 0, // 农产品单价
	    cartUid: 0, // 用户id
	    cartProductSale: 1, // 成交量
	    cartPrice: 0, // 购物车选中商品总价
		cartChoose:"否",
		cartState:"未失效",
	    cartCreateTime: new Date(), // 创建时间
	    cartUpdateTime: new Date() // 更新时间
	  };
	//······································购物车信息对象end······························
	  console.log('进入页面');
	  productId = route.query.productId;
	  console.log('产品参数',route.query.productId);
	//······································获取当前产品······························
	  getGoodsDetail(productId).then((res) => {
		dataList.value = res.data

		mainPic.value = res.data.pictureList.find(item => item.picMain === 1).picContent;//设置主图
		console.log("产品查询结果",dataList.value)
		 })
	//······································获取当前产品end······························
		  
	//······································购物车添加商品······························
       function  addShoppingCart() {
      // 判断是否登录,没有登录则显示登录组件
      if (userStore.isAuthenticated!=true) {
		ElMessage.warning("请先登录，享受购物乐趣~~~")
		router.push("/login")
        return;
      }
		cartInfo.cartImgTitle =  mainPic.value, // 标题图地址
		cartInfo.cartProductId = dataList.value.productId, // 农产品编号
		cartInfo.cartProductName=  dataList.value.productName , // 农产品名称
		cartInfo.cartProductPrice= dataList.value.productNowPrice, // 农产品单价
		cartInfo.cartUid= userStore.user.sub, // 用户id
		cartInfo.cartPrice= dataList.value.productNowPrice, // 购物车选中商品总价
		cartInfo.cartCreateTime= new Date(), // 创建时间value
		cartInfo.cartUpdateTime= new Date() // 更新时间
		console.log("购物请求体：：：",cartInfo)
		cartStore.unshiftShoppingCart(cartInfo);
		addCart(cartInfo)
        .then(res => {
			console.log("加购结果：：：",res)
			ElMessage.warning(res.msg);
          // switch (res.data.data.code) {
          //   case "001":
          //     console.log(res.data.data.shoppingCartData);
          //     // 新加入购物车成功
          //     this.unshiftShoppingCart(res.data.data.shoppingCartData);
          //     this.notifySucceed("新加入购物车成功");
          //     location.reload();
          //     break;
          //   case "002":
          //     //
          //     this.addShoppingCartNum(this.productID);
          //     this.notifySucceed("该商品已经在购物车，数量+1");
          //     break;
          //   case "003":
          //     //
          //     this.dis = true;
          //     this.notifyError("商品数量达到限购数量");
          //     break;
          //   default:
          //     this.notifyError(res.data.message);
          // }
        })
        .catch(err => {
          return Promise.reject(err);
        });
    }
  </script>
  <style lang="less">
  .time{
    background-color: #ff6700;
    color: white;
    padding: 3px;
    border-radius: 3px;
  }
  /* 头部CSS */
  #details .page-header {
    height: 64px;
    margin-top: -20px;
    z-index: 4;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.07);
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.07);
  }
  
  #details .page-header .title {
    width: 1225px;
    height: 64px;
    line-height: 64px;
    font-size: 25px;
    font-weight: bold;
    color: #373737;
	margin-top: 20px;
	margin-left: 15%;
  }
  
  #details .page-header .title p {
    float: left;
  }
  
  #details .page-header .title .list {
    height: 64px;
    float: right;
  }
  
  #details .page-header .title .list li {
    float: left;
    margin-left: 20px;
  }
  
  #details .page-header .title .list li a {
    font-size: 14px;
    color: #616161;
  }
  
  #details .page-header .title .list li a:hover {
    font-size: 14px;
    color: #ff6700;
  }
  
  /* 头部CSS END */
  
  /* 主要内容CSS */
  #details .main {
    width: 1225px;
    height: 560px;
    padding-top: 30px;
    margin: 0 auto;
  }
  
  #details .main .block {
    float: left;
    width: 560px;
    height: 560px;
  }
  
  #details .el-carousel .el-carousel__indicator .el-carousel__button {
    background-color: rgba(163, 163, 163, 0.8);
  }
  
  #details .main .content {
    float: left;
    margin-left: 25px;
    width: 640px;
  }
  
  #details .main .content .name {
    height: 30px;
    line-height: 35px;
    font-size: 35px;
    font-weight:bold;
    color: #ff6700;
  }
  
  #details .main .content .intro {
    color: #b0b0b0;
	margin-top:50px;
  }
  
  #details .main .content .store {
    color: #ff6700;
    padding-top: 10px;
  }
  
  #details .main .content .price {
    display: block;
    font-size: 30px;
    color: #ff6700;
    border-bottom: 1px solid #e0e0e0;
    padding: 25px 0 25px;
  }
  
  #details .main .content .price .del {
    font-size: 20px;
    margin-left: 10px;
    color: #b0b0b0;
    text-decoration: line-through;
  }
  
  #details .main .content .pro-list {
    background: #f9f9fa;
    padding: 30px 60px;
    margin: 50px 0 50px;
  }
  
  #details .main .content .pro-list span {
    line-height: 30px;
    color: #616161;
  }
  
  #details .main .content .pro-list .pro-price {
    float: right;
  }
  
  #details .main .content .pro-list .pro-price .pro-del {
    margin-left: 10px;
    text-decoration: line-through;
  }
  
  #details .main .content .pro-list .price-sum {
    color: #ff6700;
    font-size: 24px;
    padding-top: 20px;
  }
  
  #details .main .content .button {
    height: 55px;
    margin: 10px 0 20px 0;
  }
  
  #details .main .content .button .el-button {
    float: left;
    height: 55px;
    font-size: 16px;
    color: #fff;
    border: none;
    text-align: center;
  }
  
  #details .main .content .button .shop-cart {
    width: 340px;
    background-color: #ff6700;
  }
  
  #details .main .content .button .shop-cart:hover {
    background-color: #f25807;
  }
  
  #details .main .content .button .like {
    width: 260px;
    margin-left: 40px;
    background-color: #b0b0b0;
  }
  
  #details .main .content .button .like:hover {
    background-color: #757575;
  }
  
  #details .main .content .pro-policy li {
    float: left;
    margin-right: 20px;
    color: #b0b0b0;
  }
  
  .sun_pl {
    width: 65%;
    margin: auto;
  
    .sun_p_lj {
      font-size: 25px;
      text-align: center;
      border-bottom: 1px solid #e0e0e0;
      border-top: 1px solid #e0e0e0;
      padding: 20px;
      margin: 20px;
    }
  }
  
  /* 主要内容CSS END */
  </style>